<template>
  <div class="home" :style="{ height: pHeight }">
    <div class="contant">
      <div class="sub-title">注册</div>
      <div class="form">
        <div class="form-item">
          用户昵称：
          <mt-field label="" placeholder="请输入用户昵称" v-model="form.nick" type="text"></mt-field>
        </div>
        <!-- <div class="form-item">
          账号：
          <mt-field label="" placeholder="请输入账号" v-model="form.account" type="text"></mt-field>
        </div> -->
        <div class="form-item" v-if="type == 'phone'">
          账号：
          <mt-field label="" placeholder="请输入手机号码" v-model="form.tel" type="text"></mt-field>
        </div>
        <div class="form-item" v-if="type == 'email'">
          账号：
          <mt-field label="" placeholder="请输入邮箱号码" v-model="form.emain" type="text"></mt-field>
        </div>
        <div class="form-item">
          密码：
          <mt-field label="" placeholder="请输入密码" v-model="form.password" type="password"></mt-field>
        </div>
        <div class="form-item" @click="openPicker">
          所在岗位：
          <mt-field label="" placeholder="请选择" :value="form.jobName" type="text"></mt-field>
        </div>
        <VuePicker :data="pickData" @cancel="cancel" @confirm="confirm" :showToolbar="true" :maskClick="true" :visible.sync="pickerVisible" />
        <div class="form-item" @click="openSexPicker">
          职称：
          <mt-field label="" placeholder="请选择" :value="form.sexName" type="text"></mt-field>
        </div>
        <VuePicker :data="pickData1" @cancel="cancel1" @confirm="confirm1" :showToolbar="true" :maskClick="true" :visible.sync="pickerVisible1" />

        <div class="form-item">
          验证码：
          <mt-field label="" placeholder="请输入验证码" v-model="form.code" type="text">
            <div>
              <span @click="verification" v-if="stauts == 'start'">获取验证码</span>
              <span v-if="stauts == 'down'">{{count}}</span>
              <span @click="verification" v-if="stauts == 'restart'">重新获取</span>
            </div> 
          </mt-field>
        </div>
      </div>

      <mt-button type="primary" class="submit" @click="submit" style="margin-top:20px;">
        提交
      </mt-button>
      <mt-button type="danger" class="submit" @click="back" style="margin-bottom:10px;">
        返回
      </mt-button>
      <div class="desc" @click="toggleReg">
        <span v-if="type == 'phone'">邮箱注册</span>
        <span v-if="type == 'email'">手机注册</span>
      </div>
      <div class="error">{{ errmsg }}</div>
    </div>
  </div>
</template>

<script>
import VuePicker from "vue-pickers";
export default {
  name: "Home", // 登录
  components: { VuePicker },
  data() {
    return {
      pHeight: "100%",
      type: "phone", // 手机 or 邮箱 email
      form: {
        job: "",
        jobName: "",
        sex: "",
        sexName: "",
      },
      // 岗位picker
      pickerVisible: false,
      pickData: [
        [
          { label: "个人登入", value: "1" },
          { label: "科主任登入", value: "2" },
          { label: "主委登入", value: "3" },
          { label: "科室登入", value: "4" },
        ],
      ],
      // 性别picker
      pickerVisible1: false,
      pickData1: [],
      errmsg: "",
      // 验证码倒计时
      stauts: 'start',// 'down' "restart"
      count: 60,
    };
  },
  mounted() {
    this.$nextTick(() => {
      let pageInfo = this.getWindowConfig();
      this.pHeight = pageInfo.windowHeight + "px";
    });

    this.$axios
      .get("/web/sysTheTitle")
      .then((res) => {
        console.log("发送", res.data);
        var list = [];
        list.forEachve
        res.data.forEach(resve => {
          var cs = { label: resve.dictLabel, value: resve.dictValue }
          list.push(cs);
        })
        this.pickData1 = [list];

      });

  },
  methods: {
    getWindowConfig() {
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      if (typeof windowWidth !== "number") {
        if (document.compatMode === "CSS1Compat") {
          windowWidth = document.documentElement.clientWidth;
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowWidth = document.body.clientWidth;
          windowHeight = window.body.clientHeight;
        }
      }
      return {
        windowWidth: windowWidth,
        windowHeight: windowHeight,
      };
    },
    // 岗位
    openPicker() {
      console.log("cancel");
      this.pickerVisible = true;
    },
    cancel() {
      console.log("cancel");
    },
    confirm(res) {
      this.form.job = res;
      this.form.jobName = this.getPickerName(res);
    },
    // 性别
    openSexPicker() {
      this.pickerVisible1 = true;
    },
    cancel1() {
      console.log("cancel");
    },
    confirm1(res) {
      this.form.sex = res;
      this.form.sexName = this.getPickerName(res);
    },
    getPickerName(val) {
      if (Array.isArray(val) && val.length == 1) {
        return val[0].label;
      } else {
        return "";
      }
    },
    //提交
    submit() {
      // console.log("提交",this.form.job);
      // console.log("提交",this.form.job[0].value);
      var username = "";
      if (this.type == "phone") {
        username = this.form.tel;
      } else {
        username = this.form.emain;
      }
      this.$axios
        .post("/web/registered", {
          nickName: this.form.nick,
          userName: username,
          password: this.form.password,
          postId: this.form.job[0].value,
          theTitle: this.form.sex[0].value,
          code: this.form.code,
          type: this.type
        })
        .then((res) => {
          console.log("发送", res);
        });

    },
    toggleReg() {
      console.log("toggleReg: ");

      if (this.type == "phone") {
        this.type = "email";
      } else {
        this.type = "phone";
      }
      this.errmsg = "";
      this.form = {
        job: "",
        jobName: "",
        sex: "",
        sexName: "",
      };
    },

    verification() {
      var username = "";
      if (this.type == "phone") {
        if (
          this.form.tel == "" ||
          this.form.tel == undefined ||
          this.form.tel == null
        ) {
          this.errmsg = "手机不能为空";
          return;
        } else {
          const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!reg.test(this.form.tel) && this.form.tel != "") {
            this.errmsg = "请输入正确的电话号码";
            return;
          } else {
            username = this.form.tel;
          }
        }
      } else {
        if (
          !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(
            this.form.emain
          )
        ) {
          this.errmsg = "请输入正确的邮箱地址";
          return;
        } else {
          if (!this.form.emain) {
            this.errmsg = "邮箱不能为空";
            return;
          } else {
            username = this.form.emain;
          }
        }
      }
      this.count = 60
      this.stauts = "down"
      this.countDown()
      this.$axios
        .post("/web/send", {
          username: username,
          bol: this.type,
        })
        .then((res) => {
          console.log("发送", res);
          // if (res.code == 200) {
          //   this.$store.commit("set_user_info", {
          //     username: this.account,
          //     post: this.active,
          //     userId: res.userId,
          //   });
          //   this.$router.push("./select");
          // } else {
          //   this.errmsg = res.msg;
          // }
        });
    },
    countDown() {
      this.count--
      if(this.count == 0) return this.stauts = 'restart'
      setTimeout(() => {
        this.countDown()
      }, 1000)
    },
    back(){
      this.$router.back()
    }
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/style/base.scss";
.home {
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/img/bg2.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contant {
  width: 80%;
  height: 90%;
  background: $f-bg-color;
  border-radius: 10px;
  padding: 20px 10px 0;
  box-shadow: 2px 2px 2px rgba(138, 134, 134, 0.2);
  position: relative;
  overflow: auto;
}
.title {
  font-size: 1.8rem;
  font-weight: bold;
}

.sub-title {
  color: #407dfd;
  margin-top: 1rem;
  font-size: 1.3rem;
  text-align: center;
}

.form {
  margin-top: 30px;
  .form-item {
    border-bottom: 1px solid #a1abbd;
    margin-top: 10px;
    &.item-active {
      border-bottom: 1px solid #407dfd;
      transition: 1s;
    }
  }
}

::v-deep .mint-field .mint-cell-title {
  width: 80px;
}

.submit {
  margin: 5px 0;
  width: 100%;
}
.desc {
  color: #407dfd;
  text-align: center;
  margin-bottom: 20px;
}
.error {
  margin-top: 10%;
  color: #fa3534;
  text-align: center;
}
</style>
